<template>
  <div class="page-box">
    <el-form :inline="true" :model="searchData" ref="form" label-width="90px">
      <el-form-item label="商品目录">
        <el-select v-model="searchData.primaryCategory" placeholder="请选择一级目录" filterable clearable @change="categorySearch(2)">
          <el-option
            v-for="emall in categoryLv1"
            :key="emall.id"
            :label="emall.categoryName"
            :value="emall.id">
          </el-option>
        </el-select>
        <el-select style="margin-left:10px;" v-model="searchData.secondaryCategory" placeholder="请选择二级目录" filterable clearable @change="categorySearch(3)">
          <el-option
            v-for="emall in categoryLv2"
            :key="emall.id"
            :label="emall.categoryName"
            :value="emall.id">
          </el-option>
        </el-select>
        <el-select style="margin-left:10px;" v-model="searchData.tertiaryCategory" placeholder="请选择三级目录" filterable clearable>
          <el-option
            v-for="emall in categoryLv3"
            :key="emall.id"
            :label="emall.categoryName"
            :value="emall.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态">
        <el-select style="margin-left:10px;" v-model="searchData.goodsState" placeholder="请选择商品状态" clearable>
          <el-option
            v-for="state in states"
            :key="state.key"
            :label="state.value"
            :value="state.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="searchData.goodsName" placeholder="请输入商品名称" ></el-input>
      </el-form-item>
      <!-- <el-form-item label="生产地">
        <el-input v-model="searchData.goodsArea" placeholder="请输入生产地" ></el-input>
      </el-form-item> -->
      <el-form-item label="规格型号">
        <el-input v-model="searchData.typeNo" placeholder="请输入规格型号" ></el-input>
      </el-form-item>
      <el-form-item label="包装方式">
        <el-input v-model="searchData.packing" placeholder="请输入包装方式" ></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="handleCurrentChange(1)">查询</el-button>
      </el-form-item>

    </el-form>

    <el-table
        border
        :data="tableData"
        :max-height="maxHeightNow"
        style="width: 100%"
        >
      <el-table-column prop="tertiaryCategoryName" fixed label="商品目录"  width="110px"></el-table-column>
      <el-table-column prop="brandName"  label="商品品牌"  width="100px"></el-table-column>
      <el-table-column prop="typeNo"  label="规格型号"  width="170px"></el-table-column>
      <el-table-column fixed label="商品名称"  width="280px">
        <template slot-scope="scope">
          <el-link :underline="false" @click="gotoDeatil(scope.row.id)">{{scope.row.goodsName}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" fixed width="80px" >
        <template slot-scope="scope">
          {{statesMap[scope.row.goodsState]}}
        </template>
      </el-table-column>
      <el-table-column prop="goodsPrice" label="市场价格"  width="100px"></el-table-column>
      <el-table-column prop="saleUnit" label="计量单位"  width="100px"></el-table-column>
      <el-table-column prop="packing" label="包装方式"  width="100px"></el-table-column>
      <el-table-column prop="goodsStock" label="库存"  width="100px"></el-table-column>
      <el-table-column prop="gmtCreate" label="记录时间"  width="160px"></el-table-column>
      <el-table-column prop="gmtModify" label="最后修改时间"  width="160px"></el-table-column>
      <el-table-column label="操作" fixed="right" width="210px" >
        <template slot-scope="scope">
          <el-button  type="warning" size="mini" @click="downState(scope.row)">临时下架</el-button>
          <el-button  type="primary" size="mini" @click="openDialog(scope.row)">上下架记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=totalPage>
    </el-pagination>

    <el-dialog title="商品上下架历史记录" :visible.sync="dialogVisible" width="85%" >
      <el-table border :data="logTableData" style="width: 100%">
        <el-table-column label="商品状态" min-width="16%" >
          <template slot-scope="scope">
            {{statesMap[scope.row.goodsState]}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="时间"  min-width="16%">
          <template slot-scope="scope">
            {{scope.row.createTime.replace("T"," ")}}
          </template>
        </el-table-column>
        <el-table-column prop="goodsPrice" label="市场参考价" min-width="16%"></el-table-column>
        <el-table-column label="链接" min-width="16%">
            <el-link :underline="false" @click="gotoDeatil(itemId)">点击跳转</el-link>
        </el-table-column>
        <el-table-column prop="describle" label="原因" min-width="36%"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="logHandleSizeChange"
        @current-change="logHandleCurrentChange"
        :current-page="logCurrentPage"
        :page-size=logPageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=logTotalPage>
      </el-pagination>
    </el-dialog>
    
  </div>
</template>

<script>
  import { queryGodCategoryZtreeAsyn, goodsItemManageList, itemStateHisList, postGoodsState} from '@/api/supplier.api';
  export default {
    name: 'e-commerce-putaway',
    components: {},
    data() {
      return {
        searchData:{
          secondaryCategory:"",
          tertiaryCategory:"",
        },
        categoryLv1:[],
        categoryLv2:[],
        categoryLv3:[],
        states:[
          {
            key:"PASS",
            value:"正常上架"
          },
          {
            key:"DOWN",
            value:"商品下架"
          },
        ],
        statesMap:{
          "PASS":"正常上架",
          "DOWN":"商品下架"
        },

        tableData:[],
        currentPage:1,
        pageSize:10,
        totalPage:0,

        dialogVisible:false,
        itemId:"",
        logTableData:[], //上下架记录列表
        logCurrentPage:1,
        logPageSize:10,
        logTotalPage:0,


      }
    },
    watch: {},
    computed: {
      maxHeightNow () {
        const height = window.innerHeight
        return height -  320
      }
    },
    created() {
      this.categorySearch(1);
      this.onSearch();
    },
    mounted() {
    },
    methods: {
      categorySearch(level){
        let parentId = null;
        if(level==2){
          this.categoryLv3=[];
          this.searchData.secondaryCategory="";
          this.searchData.tertiaryCategory="";

          if(!this.searchData.primaryCategory){
            this.categoryLv2=[];
            return;
          }
          parentId = this.searchData.primaryCategory;
        }else if(level==3){
          this.searchData.tertiaryCategory="";
          if(!this.searchData.secondaryCategory){
            this.categoryLv3=[];
            return;
          }
          parentId = this.searchData.secondaryCategory;
        }

        queryGodCategoryZtreeAsyn(parentId,"1").then( res =>{
          if(level==1){
            this.categoryLv1=res;
          }else if(level==2){
            this.categoryLv2=res;
          }else if(level==3){
            this.categoryLv3=res;
          }
        })
        
      },

      gotoDeatil(id){
        window.open('./detail?id='+id);
      },

      onSearch(){
        this.searchData.current = this.currentPage;
        this.searchData.size = this.pageSize;
       
       goodsItemManageList(this.searchData).then( res =>{
          this.tableData = res.content
          this.totalPage = res.totalElements
        })


      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.onSearch()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.onSearch()
      },

      openDialog(row){
        this.logCurrentPage=1;
        this.logPageSize=10;
        this.logTotalPage=0;
        this.itemId = row.id;
        
        this.searchHis();
      },

      searchHis(){
        const params = {
          current : this.logCurrentPage,
          size : this.logPageSize
        }
        itemStateHisList(this.itemId,params).then( res =>{
          this.logTableData = res.records
          this.logTotalPage = res.total
          if(!this.dialogVisible){
            this.dialogVisible=true;
          }
        })
      },

      logHandleSizeChange(val) {
        this.logPageSize = val
        this.logCurrentPage = 1
        this.searchHis()
      },
      logHandleCurrentChange(val) {
        this.logCurrentPage = val
        this.searchHis()
      },

      downState(row){
        this.$confirm('是否确定下架此商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postGoodsState(row.id,"DOWN").then(res => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.onSearch ()
          })

        });
        
      },

    }
  }
</script>

<style scoped lang="scss">
  .page-box {
    padding: 20px;
    background: white;
    .form-operation {
      text-align: right;
      .el-form-item {
        margin-right: 0;
      }
    }
    .el-pagination {
      padding: 20px;
      text-align: right;
    }
    &-tool {
      // text-align: right;
      padding-bottom: 20px;
    }
  }

</style>
